<template>
  <view class="list-money-list">
    <view class="list-money-row">
      <view class="list-money-col" v-for="item in products" :key="item.id">
        <view class="list-money-item" @click.stop="$emit('product-click', item)">
          <image class="list-money-image" :src="item.goods_image" mode="aspectFill" />
          <view class="list-money-title">{{ item.goods_name }}</view>
          <view class="list-money-bottom">
            <view class="list-money-price">
              <image src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734054157675b910d35352.png " mode="aspectFill" />
              <text class="list-money-symbol">¥</text>
              <text class="list-money-value">{{ item.online_price }}</text>
              <view class="temperature-box" v-if="item.rebate > 0">
                  {{ item.rebate }}<text style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
              </view>
            </view>
            <view class="money-img-product-add-btn  icontext qh-rt-single qh-rt-a-zu4423 car-num-icon add" @click.stop="$emit('product-click', item)"></view>
           
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ProductGrid",
  props: {
    products: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  emits: ["product-click"],
};
</script>



<style lang="scss" scoped>

.temperature-box {
	 background-color: #C39646;
	 border-radius: 16rpx 16rpx 16rpx 16rpx;
	 color: #FFFFFF; 	 	 	 	 	 	/* 白色文字 */
	 font-size: 20rpx; 	 	 	 	 	/* 文字大小 */
	 margin-top: 8rpx;
	 height: 28rpx;
	 text-align: center;
	 padding: 5rpx;
	 line-height: 28rpx;
	 }
.money-img-product-add-btn {
  width: 48rpx;
  height: 48rpx;
  background-color: #D84D4D;
  color: #E0B879;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 600;
}
.list-money-list {
  padding: 12px;

  .list-money-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    .list-money-col {
      border: 2px solid #E0B879;
      border-radius: 30rpx;
      .list-money-item {
        border-radius: 12px;
        overflow: hidden;
        padding: 8px 8px 0;

        .list-money-image {
          width: 100%;
          height: 160px;
          background: #f5f5f5;
          border-radius: 8px;
        }

        .list-money-title {
          font-size: 28rpx;
          display: -webkit-box;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          white-space: normal;
          margin: 30rpx 0;
        }

        .list-money-bottom {
          display: flex;
          align-items: center;
          justify-content: space-around;
          padding: 0 10rpx 20rpx;

          .list-money-price {
            display: flex;
            align-items: baseline;
            color: #D84D4D;
            position: relative;
            image{
              position: absolute;
              top: 50%;
              left: 30%;
              transform: translate(-50%, -50%);
              width: 156rpx;
              height: 70rpx;
            }

            .list-money-symbol {
              font-size: 12px;
              margin-right: 1px;
            }

            .list-money-value {
              font-size: 18px;
              font-weight: bold;
            }
          }

          .list-money-button {
            background: linear-gradient(to right, #ff8181, #ff5b5b);
            color: #fff;
            font-size: 24rpx;
            padding: 6px 12px;
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(255, 91, 91, 0.2);
          
          }
        }
      }
    }
  }
}
</style>
